<template>
	<view class="view">
		<u-form labelPosition="left" :model="notice" :rules="rules" ref="uForm">
			<u--textarea placeholder="请输入标题" style="padding-left: 30rpx;" v-model="notice.title"
			 autoHeight count maxlength="20">
			</u--textarea>
			<view>
				<!-- <editor id="editor" class="ql-container" v-model="context"
					placeholder="请输入内容"></editor> -->
				<textarea placeholder="请输入内容" class="ql-container" style="padding: 30rpx;" v-model="context"></textarea>
			</view>
			<view class="uni-uploader__files">
				<!-- 图片 -->
			   <block v-for="(image, index) in imageList" :key="index">
					<view class="uni-uploader__file">
						<view class="icon-cuo">
							<u-icon name="close" color="#ffffff" size="20" @click="deleteImage"></u-icon>
						</view>
						<image class="uni-uploader__img" :src="image.url" :data-src="image.url" @click="previewImage"></image>
					</view>
				</block>
				<!-- 文件 -->
				<block v-for="(file, index1) in fileList">
					<view class="uni-uploader__file2">
						<view class="icon-cuo">
							<u-icon name="close" color="#ffffff" size="20" @click="deleteFile"></u-icon>
						</view>
						<view class="uni-uploader__file2_fileView"  @click="open(file.url)">
							<image src="/static/edu/doc.PNG" :style="fileStyle" v-if="file.type=='doc'"></image>
							<image src="/static/edu/xls.PNG" :style="fileStyle" v-if="file.type=='xls'"></image>
							<u--text :text="file.fileName" size="14" type="info" align="center"></u--text>
						</view>
					</view>
				</block>
				<view class="uni-uploader__input-box" v-if="imagesShow" @click="chooseImage">
					<view>
						<image src="/static/edu/uploadImg.PNG" :style="fileStyle"></image>
						<u--text text="图片" align="center" color="#3377cb" size="16"></u--text>
					</view>
				</view>
				<view class="uni-uploader__input-box" v-if="fileShow" @click="chooseFile">
					<view>
						<image src="/static/edu/uploadFile.PNG" :style="fileStyle"></image>
						<u--text text="文件" align="center" color="#3377cb" size="16"></u--text>
					</view>
				</view>
			</view>
			<view style="height: 30rpx;width: 100%;background-color: #f1f1f1;">
				
			</view>
			<u-form-item borderBottom @click="getStudentItem()">
				<u--text text="选择对象" class="text"></u--text>
				<div class="icon-text-container">
				  <u--text :text="studentName" class="text" type="info"></u--text>
				  <u-icon name="arrow-right" style="margin-right: 20rpx;"></u-icon>
				</div>
			</u-form-item>
			<u-form-item borderBottom class="custom-form-item">
				<u--text text="微信通知" class="text"></u--text>
				<view class="switch-container">
					<u-switch v-model="notice.isWx" activeColor="#4de871"></u-switch>
				</view>
			</u-form-item>
			<u-form-item borderBottom class="custom-form-item">
				<u--text text="短信通知" class="text"></u--text>
				<view class="switch-container">
					<u-switch v-model="notice.isSms" activeColor="#4de871"></u-switch>
				</view>
			</u-form-item>
			<u-form-item>
				<u-button text="发送" size="normal" color="#3377cb"
					@click="sendNotification" class="u_button">
				</u-button>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
import config from '@/common/config'
import {uniLink} from '@dcloudio/uni-ui';
const tempToken = uni.getStorageSync('token');

export default {
	components: {
		uniLink
	},
	data() {
		return {
			imagesShow: true,
			fileShow: true,
			src: '',
			studentName: '未选择',
			context: '',
			notice: {
				title:'',
				context:'',
				isWx : true,
				isSms : false,
				studentList: [],
				imageList: [],
				fileList: [],
			},
			defaultNotice:{
				
			},
			preImageList:[],
			imageList:[],
			fileList:[],
			selectStudentList:[],
			rules: {
				
			},
		};
	},
	create() {
		this.defaultNotice = JSON.parse(JSON.stringify(this.notice));
	},
	methods:{
		chooseImage(){
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success:(res)=> {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						const url = res.tempFilePaths[i];
						uni.uploadFile({
							url: config.baseUrl + '/system/oss/uploadLocal', 
							filePath: url,
							name: 'file',
							header: {
								Authorization: "Bearer " + tempToken,
							},
							success: (result) => {
								if (result.statusCode == "200") {
									let data = JSON.parse(result.data);
									let image = {
										url: data.data.url,
										srcPath: data.data.path,
										fileName: data.data.fileName
									}
									this.imageList.push(image);
									this.preImageList = this.preImageList.concat(data.data.url);
									console.log(this.imageList);
									if(this.imageList.length == 9) {
										this.imagesShow = false;
									}		
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'fail',
									});
								}
							}
						});
					}
				}
			});
		},
		chooseFile() {
			// 上传文件
			console.log('上传文件')
			uni.chooseFile({
				count: 1, 
				success:(res)=> {
					for (var i = 0; i < res.tempFilePaths.length; i++) {
						const extension = res.tempFiles[i].name.substring(res.tempFiles[i].name.lastIndexOf('.') + 1);
						if (extension != 'xls' && extension != 'xlsx'
							&& extension != 'doc' && extension != 'docx') {
							uni.showToast({title: '只能上传excel或者doc文件', icon: 'fail'});
							return;
						}
						let url = res.tempFilePaths[i];
						uni.uploadFile({
							url: config.baseUrl + '/system/oss/uploadLocal', 
							filePath: url,
							name: 'file',
							header: {Authorization: "Bearer " + tempToken },
							success: (result) => {
								if (result.statusCode == "200") {
									let data = JSON.parse(result.data);
									let file = {
										url: data.data.url,
										srcPath: data.data.path,
										fileName: data.data.fileName,
										type: this.setFileType(data.data.fileName)
									}
									this.fileList.push(file);
									if(this.fileList.length >= 1) {
										this.fileShow = false;
									}		
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'fail',
									});
								}
							},
						});
					}
				}
			});
		},
		setFileType(fileName) {
			const extension = fileName.substring(fileName.lastIndexOf('.') + 1);
			if (extension == 'xls' || extension == 'xlsx' ) {
				return "xls";
			}
			if (extension == 'doc' || extension == 'docx' ) {
				return "doc";
			}
		},
		deleteFile(index){
			uni.showModal({
				title:"提示",
				content:"是否要删除此文件",
				success:(res) =>{
					if(res.confirm){
						this.fileShow = true;
						this.fileList.splice(index, 1);
						if(this.imageList.length < 9) {
							this.fileShow = true;
						}
					}
				}
			})
		},
		previewImage: function(e) {
			//预览图片
			var current = e.target.dataset.src
			uni.previewImage({
				current: current,
				urls: this.preImageList
			})
		},
		deleteImage(index){
			uni.showModal({
				title: "提示",
				content: "是否要删除该图片",
				success: (res) => {
					if (res.confirm) {
						this.imageList.splice(index, 1);
						this.preImageList.splice(index, 1);
						if(this.imageList.length < 9) {
							this.imagesShow = true;
						}
					}
				}
			})
		},
		sendNotification() {
			if (this.notice.title.length == 0) {
				this.$u.toast('请输入标题');
				return;
			}
			if (this.context.length == 0 ) {
				this.$u.toast('请输入内容');
				return;
			}
			/* this.notice.context = this.context.detail.html; */
			this.notice.context = this.context.replace(/\n/g, "<br/>");
			this.notice.context = this.notice.context.replace(/\r\n/g, "<br/>");
			if (this.selectStudentList.length == 0) {
				this.$u.toast('请输入发送对象');
				return;
			}
			if (!this.notice.isWx && !this.notice.isSms) {
				this.$u.toast('请选择发送通知方式');
				return;
			}
			this.notice.studentList = this.selectStudentList;
			this.notice.imageList = this.imageList;
			this.notice.fileList = this.fileList;
			this.notice.isWx = this.notice.isWx == true ? "1" : "0";
			this.notice.isSms = this.notice.isSms == true ? "1" : "0";
			this.$u.api.publishNotice(this.notice).then(res => {
				if(res.code =='200'){
					uni.showToast({
						title: '发布成功',
						icon: 'success',
					});
					this.clear();
				} else {
					uni.showToast({
						title: '发布失败',
						icon: 'fail',
					});
				}
			});
		},
		getStudentItem() {
			var _this = this;
			uni.navigateTo({
			    url: 'selectStudent',
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					selectStudent: function(data) {
						_this.selectStudentList = data;
						let studenName = '';
						if (_this.selectStudentList.length > 0) {
							_this.selectStudentList.forEach((item) => {
								studenName += item.label + "," ;
							});
							if (studenName.length < 20) {
								studenName = studenName.slice(0, -1);
							} else {
								studenName = studenName.substring(0, 20) + "...";
							}
						}
						_this.studentName = studenName;
					},
				}
			});
		},
		open(url) {
			window.location.href = url;
		},
		clear(){
			this.$router.go(0);
		},
	},
	computed: {
		fileStyle() {
			const screenWidth = document.documentElement.clientWidth;
			const squareSize = screenWidth / 8;
			return `width: ${squareSize}px; height: ${squareSize}px;`;
		},
    },
};
</script>

<style lang="scss" scoped>
$icon-cuo-width:15px !default;
$icon-cuo-height:15px !default;
.custom-form-item {
  position: relative;
}
.text {
	font-size: 30rpx;
	padding-left: 10rpx;
}
.icon-text-container {
  display: flex;
  align-items: center;
}
.uni-uploader__files {
	display:flex;
	flex-wrap:wrap;
	align-items: center;
}
.uni-uploader__input-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50vw; /* 使用视窗宽度的50%作为宽度 */
	height: 50vw; /* 使用视窗宽度的50%作为高度 */
}
.uni-uploader_file {
	width: 50vw; /* 使用视窗宽度的50%作为宽度 */
	height: 50vw; /* 使用视窗宽度的50%作为高度 */
	background: url('/static/edu/uploadFile.PNG') no-repeat;
	background-size: 50% 50%;
	background-position: center;
}
.uni-uploader__file,.uni-uploader__file2{
	position: relative;
	z-index: 1;
    width: 49vw; /* 使用视窗宽度的50%作为宽度 */
    height: 50vw; /* 使用视窗宽度的50%作为高度 */
	text-align: center;
}
.uni-uploader__img {
	display: inline;
}
.icon-cuo {
	transform: scale(0.9);
	position: absolute;
	right: 0;
	background: black;
	z-index: 999;
}
.uni-uploader__file2_fileView {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.icon-text {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ql-container {
	font-size: 30rpx;
	padding-left: 14rpx;
	padding-top: 6rpx;
	border: 1rpx solid rgb(192, 196, 204);
}
.uni-textarea-placeholder {
	color: rgb(192, 196, 204);
}
/deep/ .ql-editor.ql-blank:before{
	font-style: normal;
	color: rgb(192, 196, 204);
	font-size: 28rpx;
}
.u_button {
	width: 80%;
	margin-bottom: 10px;
}
</style>